<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <ul>
            <li @click="handleClick(1,$event)">第一个li</li>
            <li @click="handleClick(2,$event)">第二个li</li>
            <li @click="handleClick(3,$event)">第三个li</li>
        </ul>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
        var vm = new Vue({
                el: '#app',
                data: {},
                methods: {
                    handleClick: function(num, e) {
                        // e.target.style.backgroundColor = 'green'
                        if (num == 1) {
                            e.target.style.backgroundColor = 'green'
                        } else if (num == 2) {
                            e.target.style.backgroundColor = 'red'
                        } else {
                            e.target.style.backgroundColor = 'blue'
                        }
                    }
                }
            })
            // 我们为每一个li都绑定了点击事件, 并且绑定了同一个事件处理函数
            // 需求1: 点谁, 谁变绿
            // 需求2: 点击第一个li, 将其背景颜色变为绿色, 点击第二个li, 将其背景颜色变为红色,点击第一个li, 将其背景颜色变为蓝色
    </script>
</body>

</html>